<script setup>
import { ArrowDown, ArrowUp, Location } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import Info from './info.vue'
import { all } from '@/api/outdoor'
import { del, getGroupPage } from '@/api/group'
import { getPage,getPeopleList } from '@/api/rule'
const tableData = ref({})
// 表单状态
const filterState = ref(true)
// 表单数据
const isExpand = ref(false)

const formData = ref({ pageNum: 1, pageSize: 10 })
const outdoors = ref([])
const peoples = ref([])
onMounted(async () => {
  //查询活动数据
  let r = await getPage({pageNum:1,pageSize:100})
  outdoors.value = r.data.list
  let t = await getPeopleList({type:1})
  peoples.value = t.data.list

  loadData()
})
const loadData = async () => {
  let r = await getGroupPage(formData.value)
  tableData.value = r.data
}
const filterByName=(arr,id)=>{
  return arr.filter(item=>item.id=id)
}


// 用户编辑
const infoRef = ref()
const onUserInfo = (row) => {
  infoRef.value.state = true
  if (row) {
    infoRef.value.formData.id = row.id
    infoRef.value.formData.name = row.name
    infoRef.value.formData.type = row.type
    let aa=[]
    row.sysUsers.map(item=>{aa.push(item.id)})
    infoRef.value.formData.userIds = aa
    infoRef.value.formData.tbAttendanceRules = row.tbAttendanceRules
    infoRef.value.formData.comment = row.comment
  }
}

// 用户删除
const onDelete = (row) => {
  ElMessageBox.confirm('确定删除这条数据吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      //请求接口 删除数据
      let r = await del([row.id ])
      console.log(r);
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '删除成功' })
        loadData()
      } else {
        ElMessage({ type: 'info', message: r.data })
      }
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '用户取消' })
    })
}

//导出 下载Excel
const exportExcel = () => {
  location.href = 'http://127.0.0.1:8080/enrool/export?id=0'
}
</script>
<template>
  <Box>
    <!-- 逻辑层 -->
 <div>{{ console.log(

 outdoors.filter(u=>{
  if(u.id==10){
      return u;
  }
  })[0]?.name
  


 )
 
 
  }}</div> 
    <Info ref="infoRef" :outdoors="outdoors" :peoples="peoples" @flush="loadData" />
    <!-- <AssignRole ref="assignRoleRef" /> -->
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true" :model="formData">
        <el-form-item label="考勤组名称">
          <el-input placeholder="请输入考勤组名称" v-model="formData.name" />
        </el-form-item>
        <!-- <el-form-item label="户外活动">
          <el-select v-model="formData.id" placeholder="请选择户外活动" style="width: 120px">
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in outdoors"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="loadData">
            <span class="iconfont icon-sousuo"></span>搜索
          </el-button>
          <el-button type="default"> 重置 </el-button>
          <el-button type="primary" link @click="isExpand = !isExpand">
            {{ isExpand ? '收起' : '展开' }}
            <el-icon>
              <ArrowUp v-if="isExpand" />
              <ArrowDown v-else />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="onUserInfo">
          <span class="iconfont icon-jiahao"></span>添加
        </el-button>

        <el-button type="warning" @click="exportExcel">
          <span class="iconfont icon-xiazai-"></span>导出
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle>
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row>
    <!-- 按钮组 -->
    <!-- 表格 scope.row.tbAttendanceRules-->
    <el-table :data="tableData.list" :border="true" @selection-change="onSelectionChange">
      <el-table-column label="序号" align="center" width="150px">
        <template #default="scope">
          <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考勤组名称" prop="name" align="center"  />
      el-table-column<el-table-column label="考勤规则" prop="tbAttendanceRules" align="center" width="200">
        <template #default="scope">
         {{ outdoors.filter(u=>{if(u.id==scope.row.tbAttendanceRules){ return u; }   })[0]?.name}}
        </template>
      </el-table-column>
      <el-table-column label="考勤组人员" prop="userIds" align="center" >
        <template #default="scope">
          {{ 
            scope.row.sysUsers!=null?scope.row.sysUsers.map(item=>item.empName).toString():null
          }}
         <!-- {{ outdoors.filter(u=>{if(u.id==scope.row.tbAttendanceRules){ return u; }   })[0]?.name}} -->
        </template>
      </el-table-column>
      <el-table-column label="是否开启考勤组" prop="type" align="center">
        <template #default="scope">
          <div>{{ scope.row.type == 1?"是":"否" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="说明" prop="comment" align="center"  />
      <!-- <el-table-column label="工作时长" prop="remarks" align="center" width="200" /> -->
      <!-- <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
        width="200"
      ></el-table-column> -->
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scoped">
          <el-button type="primary" link size="small" @click="onUserInfo(scoped.row)">
            <span class="iconfont icon-bianji"></span>修改
          </el-button>
          <el-button type="primary" link size="small" @click="onDelete(scoped.row)">
            <span class="iconfont icon-shanchu"></span>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="formData.pageNum"
      v-model:page-size="formData.size"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="loadData"
      @current-change="loadData"
    />
    <!-- 分页 -->
    <!-- 内容 -->
  </Box>
</template>
